<template>
  <div class="good_detail">
    <!-- 轮播图+ 图片预览,然后封装一个收藏的插件,zhi -->
    <!-- 商品 --{{this.$route.params.gid}} -->
    <!-- 先设计结构,然后写样式,最好布局之后再添加逻辑,大致就是这样,不难 -->
    <!--  不再有顶部和底部,或者直接覆盖 -->

    <!-- 轮播图展示 -->
    <div class="swp_container">
      <van-swipe :autoplay="0" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images" :key="index" @click="viewImgs">
          <img :src="image">
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 简化的返回功能 -->
    <!--  <div class="simple_ctl" @click="go_back">
      <van-icon name="arrow-left"></van-icon>
    </div>-->
    <!-- 商品主要信息功能 -->
    <div class="goods_main">
      <div class="up">
        <h1 class="tit">谜久 小米8手机壳MI8钢化玻璃款全包软硅胶手机套国潮图案传统民俗文化简约清新时尚保护套 小米8 摸金能手【钢化玻璃款】</h1>
        <!-- 后期封装为 '关注组件' -->
        <div class="love">
          <van-icon name="like-o"></van-icon>关注
        </div>
      </div>

      <div class="down">
        <p class="discount_msg">
          【买一送二】下单即送挂绳，同款高清壁纸，领券更优惠，国潮原创，拒绝抄袭！
          <a href="#" class="more">更多图案，点击了解</a>
        </p>
        <div class="price_group">
          <span class="price">¥58.00</span>
          <van-button size="mini">降价提醒</van-button>
        </div>
      </div>
    </div>
    <!-- 优惠券组件  -->
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true"/>
    <!-- 优惠券列表 -->
    <van-popup v-model="showList" position="bottom">
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
    <!-- 购物车组件 -->
    <div class="sku-container">
      <van-sku
        v-model="showBase"
        :sku="skuData.sku"
        :goods="skuData.goods_info"
        :goods-id="skuData.goods_id"
        :hide-stock="skuData.sku.hide_stock"
        :quota="skuData.quota"
        :quota-used="skuData.quota_used"
        reset-stepper-on-hide
        reset-selected-sku-on-hide
        disable-stepper-input
        :close-on-click-overlay="closeOnClickOverlay"
        :message-config="messageConfig"
        :custom-sku-validator="customSkuValidator"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
      />
    </div>
    <!-- 选择 商品类型  sku -->
    <div class="good_types_select" @click="showBase = true">
      <div class="chose_txt">已选</div>
      <article class="goods_info">
        <p class="tit">小米8 摸金能手【钢化玻璃款】,1个</p>
        <p class="help">本商品支持保障服务，点击可选服务</p>
      </article>
      <div class="menu_ico">
        <van-icon name="ellipsis"></van-icon>
      </div>
    </div>
    <!-- 配送地址选择 -->
    <div class="choose_area" @click="selectArea">
      <div class="area_list">
        <div class="help_txt">送至</div>
        <div class="area_desc">
          <div class="area">北京朝阳区三环到四环之间</div>
          <p class="goods_status">
            <span class="status">现货</span>
            <span class="time">今日23:59前完成下单,24H发货</span>
          </p>
        </div>
        <div class="menu">
          <van-icon name="ellipsis"></van-icon>
        </div>
      </div>
      <!-- 运费 -->
      <div class="express">
        <p class="help_txt">运费</p>
        <p class="price">在线支付免运费</p>
      </div>
    </div>
    <ul class="fake">
      <li>
        <img src="/images/fake01.png" alt>
      </li>
      <li>
        <img src="/images/fake02.png" alt>
      </li>
      <li>
        <img src="/images/fake03.png" alt>
      </li>
      <li>
        <img src="/images/fake04.png" alt>
      </li>
      <li>
        <img src="/images/fake05.png" alt>
      </li>
      <li>
        <img src="/images/fake06.png" alt>
      </li>
    </ul>

    <!-- 底部fixed的购物车组件 -->
    <van-goods-action>
      <van-goods-action-mini-btn icon="chat-o" text="客服"/>
      <van-goods-action-mini-btn :info="cartCount" icon="cart-o" text="购物车"/>
      <van-goods-action-mini-btn icon="shop-o" text="店铺"/>
      <van-goods-action-big-btn text="加入购物车" @click="addToCart"/>
      <van-goods-action-big-btn primary text="立即购买" @click="GoToBuy"/>
    </van-goods-action>

    <div class="top_nav">
      <van-icon name="arrow-left" class="ico_return" @click="go_back"/>
      <ul class="nav_list">
        <li class="active nav_item">
          <span class="nav_txt">商品</span>
        </li>
        <li class="nav_item">评价</li>
        <li class="nav_item">详情</li>
        <li class="nav_item">推荐</li>
      </ul>
      <van-icon name="ellipsis" class="ico_menu"/>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { mapState, mapMutations } from 'vuex'
// 购物车相关数据
import skuData from './data'
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 5799,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '57.99',
  unitDesc: '元'
}
export default {
  name: 'GoodsDetail',
  data() {
    this.skuData = skuData
    return {
      // 优惠券相关数据
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      goodsDetail: [],
      active: 0,
      showList: false,
      images: [
        '/images/detail_01.jpg',
        '/images/detail_02.jpg',
        '/images/detail_03.jpg',
        '/images/detail_04.jpg'
      ],
      swiperOption: {
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        loop: true,
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination'
        }
      },
      showBase: false, // 是否显示购物车
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      quota: 0,
      closeOnClickOverlay: true,
      initialSku: {
        s1: '30349',
        s2: '1193',
        selectedNum: 3
      },
      customSkuValidator: () => '请选择xxx',
      customStepperConfig: {
        quotaText: '单次限购100件',
        stockFormatter: (stock) => `剩余${stock}件`,
        handleOverLimit: (data) => {
          const { action, limitType, quota } = data
          if (action === 'minus') {
            this.$toast('至少选择一件商品')
          } else if (action === 'plus') {
            if (limitType === 10) {
              this.$toast(`限购${quota}件`)
            } else {
              this.$toast('库存不够了')
            }
          }
        }
      },
      messageConfig: {
        uploadImg: (file, img) => new Promise(resolve => {
          setTimeout(() => resolve(img), 1000)
        }),
        uploadMaxSize: 3
      }
    }
  },
  methods: {
    ...mapMutations(['increCartCount']),
    addToCart() {
      // vuex让商品数目加 1
      this.$toast.success('加入购物车成功!')
      const newCount = this.cartCount + 1
      this.increCartCount(newCount)
    },
    GoToBuy() {
      this.$toast('商品交易业务正在开发,嘤嘤嘤~!')
    },
    selectArea() {
      console.log('弹出弹层,让其展示出来')
    },
    onBuyClicked(data) {
      this.$toast('buy:' + JSON.stringify(data))
    },
    onAddCartClicked(data) {
      this.$toast('add cart:' + JSON.stringify(data))
    },
    onPointClicked() {
      this.$toast('积分兑换')
    },
    showCart() {
      this.showBase = !this.showBase
    },
    onChange(index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange(code) {
      this.coupons.push(coupon)
    },
    // 预览图片,其实就是数据联动
    viewImgs() {
      console.log(1111)
      ImagePreview({
        images: this.images
      })
    },
    onClickLeft() {

    },
    onClickRight() {

    },
    // 返回
    go_back() {
      this.$router.go(-1)
    }
  },
  created() {

  },
  computed: {
    ...mapState(['cartCount'])
  },
  components: {
  }

}
</script>

<style scoped lang='stylus'>
.sku-container
  padding 0 15px
.good_detail
  height 2000px
  background-color #e8e8ed
.top_nav
  position fixed
  left 0
  right 0
  top 0
  display flex
  justify-content space-between
  align-items center
  height 0.88rem
  background-color #fff
  .ico_return
    flex 0 0 0.8rem
    text-align center
  .ico_menu
    flex 0 0 0.8rem
    text-align center
  .nav_list
    display flex
    flex 1
    align-items center
    .nav_item
      flex 1
      text-align center
      border-bottom 2px solid transparent
      &.active
        color #ff4444
        .nav_txt
          border-bottom 2px solid red
          padding-bottom 0.1rem
.swp_container
  position relative
  z-index 2
  img
    width 100%
.simple_ctl
  position absolute
  left 0
  top 0.2rem
  border-radius 50%
  width 0.8rem
  height 0.8rem
  line-height 0.8rem
  text-align center
  box-sizing border-box
  background rgba(0, 0, 0, 0.4)
  color #fff
.fake
  li
    img
      width 100%
.goods_main
  padding 0.2rem
  padding-bottom 0
  background-color #fff
  .up
    display flex
    .tit
      font-size 0.32rem
      line-height 0.4rem
      padding-right 0.2rem
      flex 1
    .love
      flex 0 0 0.6rem
      display flex
      flex-direction column
      height 0.8rem
      text-align center
      border-left 1px solid #ccc
      padding 0 0.1rem
  .down
    .discount_msg
      color #e4393c
      margin-bottom 0.2rem
      .more
        color #e4393c
        text-decoration underline
    .price_group
      display flex
      padding-bottom 0.2rem
      justify-content space-between
      align-items center
      border-bottom 1px solid #f2f3f5
      .price
        color #ff4444
        font-weight 700
        font-size 0.4rem

.good_types_select
  margin .2rem 0
  display flex
  align-items center
  background-color #fff
  padding .4rem
  .chose_txt
    flex 0 0 0.8rem
    text-align center
    color #999999
  .goods_info
    flex 1
  .menu_ico
    flex 0 0 0.8rem
    text-align center
.choose_area
  background-color #fff
  padding .4rem
  .area_list
    display flex
    .help_txt
      flex 0 0 .8rem
      text-align center
      color #999999
    .area_desc
      flex 1
      margin-bottom .2rem
    .menu
      flex 0 0 .8rem
      text-align center
  .express
    display flex
    .help_txt
      flex 0 0 .8rem
      color #999999
      text-align center

</style>
